<template>
<div class="advance-query-form">
  <transition name="el-fade-in-linear">
    <el-container v-if="showType == 'list'">
      <el-aside width="200px" style="border-right: 1px solid #EBEEF5;">
        <el-card class="base-card" shadow="never" :body-style="{ padding: '0px' }" style="border: none;">
          <div slot="header" class="title">行政区划</div>
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" class="px4"></el-input>
          <el-scrollbar :style="{'height': (getMainContextHeight - 51) + 'px'}" class="custom-scroll mt10">
            <el-tree :data="areaList" :props="defaultProps" @node-click="handleNodeClick" highlight-current :expand-on-click-node="false" node-key="code" ref="tree" default-expand-all :filter-node-method="filterNode"></el-tree>
          </el-scrollbar>
        </el-card>
      </el-aside>
      <el-main class="ml10" style="background:#fff">
        <el-tabs v-model="activeName" @tab-click="handleTabClick" class="infoTabStyle">
          <el-tab-pane label="全部" name="-1"></el-tab-pane>
          <el-tab-pane :label="item.name" :name="item.id" v-for="(item,index) in statusList" :key="index"></el-tab-pane>
        </el-tabs>
        <TableList ref="table" v-if="activeName" class="px10" :statusMap="statusMap" :currentAreaCode="currentAreaCode" :initData="initData" @onAdd="onAdd" @onEdit="onEdit" @onShow="onShow" @onActivity="onActivity" @onQuickEdit="onQuickEdit">
        </TableList>
      </el-main>
    </el-container>
  </transition>
  <transition name="el-fade-in-linear">
    <div style="position: relative" v-if="showType == 'form'" class="bgWhite px20 py20">
      <FormDetail ref="ground" :formStatus="formStatus" :initForm="editFormData" :initData="initData" :headerContent="headerContent" @goBack="goBack" :auth="auth" :initTypeDisabled="initTypeDisabled"></FormDetail>
    </div>
  </transition>
  <transition name="el-fade-in-linear">
    <div style="position: relative" v-if="showType == 'activity'" class="bgWhite px20 py20">
      <ActivityForm ref="activity" :currentGroundData="currentGroundData" @goBack="goBack"></ActivityForm>
    </div>
  </transition>
  <el-dialog :visible.sync="dialogVisible" append-to-body title="快捷编辑" width="65%">
    <quickForm ref="groundQuick" :initForm="editFormData" :initData="initData" :auth="auth" :initTypeDisabled="initTypeDisabled" :key="editFormData.groundId"></quickForm>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" :size="defaultFormItemSize">取 消</el-button>
      <el-button type="primary" @click="submitForm" :size="defaultFormItemSize">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>
<script>
import TableList from './table'
import FormDetail from './form'
import ActivityForm from './activity'
import quickForm from './quickForm'
import {
  GroundController,
  DictionaryController
} from '@/api';
import {
  mapGetters
} from 'vuex';
import {
  treeDataTranslate
} from '@/utils';
export default {
  name: "",
  components: {
    TableList,
    FormDetail,
    ActivityForm,
    quickForm
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      filterText: '',
      showType: 'list',
      activeName: '-1',
      punishStatusList: [],
      areaList: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'code'
      },
      activeTab: null,
      statusList: [],
      checkStatusList: [{
        name: '已校验',
        id: '1'
      }, {
        name: '未校验',
        id: '0'
      }],
      statusMap: {
        type: 'all',
        value: '-1'
      },
      currentAreaCode: "",
      initData: {
        groundTypeOptions: [],
        organizationList: [],
        statusList: [],
        centerList: [],
        areaList: [],
      },
      currentGroundData: {},
      headerContent: "",
      editFormData: {},
      auth: "",
      formStatus: "",
      dialogVisible: false,
      initTypeDisabled: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let me = this;
      let flag = me.isShowCheckStatus();
      me.auth = flag ? 'admin' : 'ground'
      DictionaryController.dictGlobalDict(me, {
        dictCode: 'publishStatus'
      }).then(res => {
        me.punishStatusList = res.getList();
        me.initData.statusList = res.getList();
        if (flag) {
          me.statusList = me.punishStatusList.concat(me.checkStatusList)
        } else {
          me.statusList = me.punishStatusList
        }
      })
      if (flag) {
        me.areaList = JSON.parse(sessionStorage.getItem("areaOptions4"))
        me.initData.areaList = me.areaList
        this.currentAreaCode = me.areaList[0].code
        me.$nextTick().then(() => {
          const firstNode = document.querySelector('.el-tree-node');
          firstNode.click();
        });
      } else {
        GroundController.area(me, {}).then(res => {
          me.areaList = treeDataTranslate(res.data, 'code', 'parentId');
          me.initData.areaList = me.areaList
          this.currentAreaCode = me.areaList[0].code
          me.$nextTick().then(() => {
            const firstNode = document.querySelector('.el-tree-node');
            firstNode.click();
          });
        })
      };
      GroundController.list(me, {
        groundDtoFilter: {
          groundType: '4'
        },
        orderParam: [{
          fieldName: "createTime",
          asc: 0
        }]
      }).then(res => {
        if (res.data.dataList.length > 0) {
          this.initData.centerList = res.data.dataList
        } else {
          this.initData.centerList = [];
        }
      })
      DictionaryController.dictGlobalDict(this, {
        dictCode: 'GroundType'
      }).then(res => {
        this.initData.groundTypeOptions = res.getList()
      })

    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //顶部页签是否显示校验状态
    isShowCheckStatus() {
      let flag = false;
      let str = sessionStorage.getItem('token').split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
      let result = JSON.parse(decodeURIComponent(escape(window.atob(str))));
      return result.groundId == 0 ? true : false
    },
    handleNodeClick(node) {
      this.currentAreaCode = node.code;
      this.$nextTick(() => {
        this.$refs.table.refreshGround(false);
      })
    },
    handleTabClick(val) {
      let me = this;
      if (me.activeName == '-1') {
        me.statusMap = {
          type: 'all',
          value: '-1'
        }
      } else if (me.activeName == '0' || me.activeName == '1') {
        me.statusMap = {
          type: 'hold1',
          value: me.activeName
        }
      } else {
        me.statusMap = {
          type: 'status',
          value: me.activeName
        }
      }
      this.$nextTick(() => {
        this.$refs.table.refreshGround(false);
      })
    },
    onAdd() {
      this.showType = "form";
      this.formStatus = "add";
      this.editFormData = {};
      this.headerContent = "新增阵地"
    },
    onEdit(row) {
      this.formStatus = "edit";
      this.headerContent = "修改阵地"
      GroundController.view(this, {
        groundId: row.groundId
      }).then(res => {
        this.editFormData = res.data;
        if(res.data.groundType == "4"){
          this.initTypeDisabled = true
        }else{
          this.initTypeDisabled = false
        }
        this.showType = "form";
      })
    },
    onQuickEdit(row) {
      GroundController.view(this, {
        groundId: row.groundId
      }).then(res => {
        this.editFormData = res.data;
        if(res.data.groundType == "4"){
          this.initTypeDisabled = true
        }else{
          this.initTypeDisabled = false
        }
        this.dialogVisible = true;
      })
    },
    onShow(row) {
      this.formStatus = "show";
      this.headerContent = "查看阵地";
      GroundController.view(this, {
        groundId: row.groundId
      }).then(res => {
        this.editFormData = res.data;
        this.showType = "form";
      })
    },
    onActivity(row) {
      this.showType = 'activity';
      this.currentGroundData = row;
    },
    goBack() {
      this.showType = 'list'
      this.$nextTick(() => {
        this.$refs.table.refreshGround(false);
        this.$refs.tree.setCurrentKey(this.currentAreaCode);
      })
    },
    submitForm() {
      let me = this;
      let data = me.$refs.groundQuick.saveData();
      if (Object.values(data).length > 0) {
        GroundController.update(me, data).then(res => {
          if (res.success) {
            me.$message.success("操作成功");
            me.dialogVisible = false;
            me.$refs.table.refreshGround(false);
          } else {
            me.$message.error(res.errorMessage);
          }
        }).catch(e => {
          reject(e);
        });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.infoTabStyle {
    padding: 0 20px;
}
.title {
    font-size: 18px;
    text-align: center;
    padding: 8px;
}
</style>
